<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Overall configuration | Luckysheet Document</title>
    <meta name="generator" content="VuePress 1.8.0">
    
    <meta name="description" content="Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.This site contains official configuration document, API, and tutorial.">
    <meta property="article:modified_time" content="2021-01-19T01:33:53.000Z">
    <meta property="og:title" content="Overall configuration">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://mengshukeji.github.io/LuckysheetDemo/guide/config.html">
    <meta name="twitter:title" content="Overall configuration">
    <meta name="twitter:url" content="https://mengshukeji.github.io/LuckysheetDemo/guide/config.html">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:label1" content="Written by">
    
    <link rel="preload" href="/LuckysheetDocs/assets/css/0.styles.58462003.css" as="style"><link rel="preload" href="/LuckysheetDocs/assets/js/app.02d9598d.js" as="script"><link rel="preload" href="/LuckysheetDocs/assets/js/2.daa13025.js" as="script"><link rel="preload" href="/LuckysheetDocs/assets/js/15.51a43d85.js" as="script"><link rel="prefetch" href="/LuckysheetDocs/assets/js/10.866635ea.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/11.825eabba.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/12.980dcb91.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/13.119fa3a0.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/14.61ea2478.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/16.de626d16.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/17.e9ae302c.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/18.46d5e5a0.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/19.6ab6bd88.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/20.a4dd0048.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/21.cf5034d8.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/22.c45a4387.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/23.e08fd533.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/24.d1e4369b.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/25.291afc50.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/26.e74f90a6.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/27.1142ecb7.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/28.d6d28da0.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/29.1ae5f953.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/3.c428902d.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/30.bf70d4f4.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/31.d87cf3af.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/32.a1b6f5f4.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/33.eded6080.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/4.b5e0f872.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/5.e526f9d4.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/6.8106d72b.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/7.c0fe87fd.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/8.abc5c19b.js"><link rel="prefetch" href="/LuckysheetDocs/assets/js/9.2bf3882a.js">
    <link rel="stylesheet" href="/LuckysheetDocs/assets/css/0.styles.58462003.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/LuckysheetDocs/" class="home-link router-link-active"><img src="/LuckysheetDocs/img/logo.png" alt="Luckysheet Document" class="logo"> <span class="site-name can-hide">Luckysheet Document</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/LuckysheetDocs/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/LuckysheetDocs/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="https://mengshukeji.github.io/LuckysheetDemo/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Demo
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="More" class="dropdown-title"><span class="title">More</span> <span class="arrow down"></span></button> <button type="button" aria-label="More" class="mobile-dropdown-title"><span class="title">More</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/LuckysheetDocs/about/" class="nav-link">
  About
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/LuckysheetDocs/guide/config.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/LuckysheetDocs/zh/guide/config.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/mengshukeji/Luckysheet" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/LuckysheetDocs/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/LuckysheetDocs/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="https://mengshukeji.github.io/LuckysheetDemo/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Demo
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="More" class="dropdown-title"><span class="title">More</span> <span class="arrow down"></span></button> <button type="button" aria-label="More" class="mobile-dropdown-title"><span class="title">More</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/LuckysheetDocs/about/" class="nav-link">
  About
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/LuckysheetDocs/guide/config.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/LuckysheetDocs/zh/guide/config.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/mengshukeji/Luckysheet" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/LuckysheetDocs/guide/" aria-current="page" class="sidebar-link">Get started</a></li><li><a href="/LuckysheetDocs/guide/config.html" aria-current="page" class="active sidebar-link">Overall configuration</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#basic-structure" class="sidebar-link">Basic Structure</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#configuration-item" class="sidebar-link">Configuration item</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#hook-function-todo" class="sidebar-link">Hook Function (TODO)</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#cell" class="sidebar-link">Cell</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#selected-area" class="sidebar-link">Selected area</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#worksheet" class="sidebar-link">Worksheet</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#workbook" class="sidebar-link">Workbook</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#image" class="sidebar-link">Image</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#comment" class="sidebar-link">Comment</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#pivot-table" class="sidebar-link">Pivot table</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#freeze" class="sidebar-link">Freeze</a></li><li class="sidebar-sub-header"><a href="/LuckysheetDocs/guide/config.html#pager-2" class="sidebar-link">Pager</a></li></ul></li><li><a href="/LuckysheetDocs/guide/sheet.html" class="sidebar-link">Sheet Configuration</a></li><li><a href="/LuckysheetDocs/guide/cell.html" class="sidebar-link">Format attributes</a></li><li><a href="/LuckysheetDocs/guide/operate.html" class="sidebar-link">Table Operation</a></li><li><a href="/LuckysheetDocs/guide/api.html" class="sidebar-link">API</a></li><li><a href="/LuckysheetDocs/guide/resource.html" class="sidebar-link">Tutorials and resources</a></li><li><a href="/LuckysheetDocs/guide/FAQ.html" class="sidebar-link">FAQ</a></li><li><a href="/LuckysheetDocs/guide/contribute.html" class="sidebar-link">Contribution guide</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="overall-configuration"><a href="#overall-configuration" class="header-anchor">#</a> Overall configuration</h1> <h2 id="basic-structure"><a href="#basic-structure" class="header-anchor">#</a> Basic Structure</h2> <p>When initializing the workbook, you can set an object configuration string ʻoptions` to customize the configuration of Luckysheet.</p> <p>The following is a simple configuration example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Configuration item</span>
<span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
     container<span class="token operator">:</span><span class="token string">'luckysheet'</span><span class="token punctuation">,</span> <span class="token comment">// set the id of the DOM container</span>
     title<span class="token operator">:</span><span class="token string">'Luckysheet Demo'</span><span class="token punctuation">,</span> <span class="token comment">// set the name of the table</span>
     lang<span class="token operator">:</span><span class="token string">'zh'</span> <span class="token comment">// set language</span>

     <span class="token comment">// More other settings...</span>
<span class="token punctuation">}</span>

<span class="token comment">// Initialize the table</span>
luckysheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
</code></pre></div><p>The <code>options</code> configuration item here will affect the entire workbook. In particular, the configuration of a single worksheet needs to be set in the <code>options.data</code> array to set corresponding more detailed parameters. Refer to <a href="/LuckysheetDocs/zh/guide/sheet.html">Worksheet Configuration</a></p> <p>For personalized needs, in addition to allowing configuration information bar (<a href="#showinfobar">showinfobar</a>), toolbar (<a href="#showtoolbar">showtoolbar</a>), bottom sheet bar (<a href="#showsheetbar">showsheetbar</a>), bottom count bar (<a href="#showstatisticBar">ShowstatisticBar</a>),
Luckysheet has opened more detailed custom configuration options, which are as follows:</p> <ul><li>Customize the toolbar (<a href="#showtoolbarConfig">showtoolbarConfig</a>)</li> <li>Customize the bottom sheet bar (<a href="#showsheetbarConfig">showsheetbarConfig</a>)</li> <li>Customize the counting bar (<a href="#showstatisticBarConfig">showstatisticBarConfig</a>)</li> <li>Custom cell right-click menu (<a href="#cellRightClickConfig">cellRightClickConfig</a>)</li> <li>Customize the right-click menu of the bottom sheet bar (<a href="#sheetRightClickConfig">sheetRightClickConfig</a>)</li></ul> <h2 id="configuration-item"><a href="#configuration-item" class="header-anchor">#</a> Configuration item</h2> <p>The following are all supported setting parameters</p> <ul><li>Container ID <a href="#container">container</a></li> <li>Workbook name <a href="#title">title</a></li> <li>Language <a href="#lang">lang</a></li> <li>Unique key <a href="#gridKey">gridKey</a></li> <li>Load the entire workbook <a href="#loadUrl">loadUrl</a></li> <li>Load other worksheet celldata <a href="#loadSheetUrl">loadSheetUrl</a></li> <li>Allow updates <a href="#allowUpdate">allowUpdate</a></li> <li>Update address <a href="#updateUrl">updateUrl</a></li> <li>Thumbnail update address <a href="#updateImageUrl">updateImageUrl</a></li> <li>Worksheet configuration <a href="#data">data</a></li> <li>Plugins <a href="#plugins">plugins</a></li> <li>Number of columns <a href="#column">column</a></li> <li>Number of rows <a href="#row">row</a></li> <li>Billion format <a href="#autoFormatw">autoFormatw</a></li> <li>Accuracy <a href="#accuracy">accuracy</a></li> <li>Allow copying <a href="#allowCopy">allowCopy</a></li> <li>Toolbar <a href="#showtoolbar">showtoolbar</a></li> <li>Customize Toolbar <a href="#showtoolbarConfig">showtoolbarConfig</a></li> <li>Information bar <a href="#showinfobar">showinfobar</a></li> <li>Bottom sheet bar <a href="#showsheetbar">showsheetbar</a></li> <li>Customize the bottom sheet bar <a href="#showsheetbarConfig">showsheetbarConfig</a></li> <li>The bottom count bar <a href="#showstatisticBar">showstatisticBar</a></li> <li>Custom Count Bar <a href="#showstatisticBarConfig">showstatisticBarConfig</a></li> <li>Allow adding rows <a href="#enableAddRow">enableAddRow</a></li> <li>Allow back to top <a href="#enableAddBackTop">enableAddBackTop</a></li> <li>User Info <a href="#userInfo">userInfo</a></li> <li>User Information Menu <a href="#userMenuItem">userMenuItem</a></li> <li>Back button link <a href="#myFolderUrl">myFolderUrl</a></li> <li>Ratio <a href="#devicePixelRatio">devicePixelRatio</a></li> <li>Function Button <a href="#functionButton">functionButton</a></li> <li>Auto-indent interface <a href="#showConfigWindowResize">showConfigWindowResize</a></li> <li>Refresh formula <a href="#forceCalculation">forceCalculation</a></li> <li>Custom cell right-click menu <a href="#cellRightClickConfig">cellRightClickConfig</a></li> <li>Customize the right-click menu of the bottom sheet bar <a href="#sheetRightClickConfig">sheetRightClickConfig</a></li> <li>The width of the row header area <a href="#rowHeaderWidth">rowHeaderWidth</a></li> <li>The height of the column header area <a href="#columnHeaderHeight">columnHeaderHeight</a></li> <li>Whether to show the formula bar <a href="#sheetFormulaBar">sheetFormulaBar</a></li> <li>Initialize the default font size <a href="#defaultFontSize">defaultFontSize</a></li> <li>Pager <a href="#pager">pager</a></li></ul> <h3 id="container"><a href="#container" class="header-anchor">#</a> container</h3> <ul><li>Type: String</li> <li>Default: &quot;luckysheet&quot;</li> <li>Usage: Container ID</li></ul> <hr> <h3 id="title"><a href="#title" class="header-anchor">#</a> title</h3> <ul><li>Type: String</li> <li>Default: &quot;Luckysheet Demo&quot;</li> <li>Usage：Workbook name</li></ul> <hr> <h3 id="lang"><a href="#lang" class="header-anchor">#</a> lang</h3> <ul><li>Type: String</li> <li>Default: &quot;en&quot;</li> <li>Usage: Internationalization settings, allow to set the language of the table, support simplified Chinese (&quot;zh&quot;), English (&quot;en&quot;) and traditional Chinese (&quot;zh_tw&quot;) and Spanish (&quot;es&quot;)</li></ul> <hr> <h3 id="gridkey"><a href="#gridkey" class="header-anchor">#</a> gridKey</h3> <ul><li>Type: String</li> <li>Default: &quot;&quot;</li> <li>Usage: Workbook unique identifier</li></ul> <hr> <h3 id="loadurl"><a href="#loadurl" class="header-anchor">#</a> loadUrl</h3> <ul><li><p>Type: String</p></li> <li><p>Default: &quot;&quot;</p></li> <li><p>Usage: Configure the address of <code>loadUrl</code> and use it in conjunction with <code>loadSheetUrl</code>, which is generally used when the amount of data is large. You can also not use the interface parameters provided by Luckysheet, and use the <a href="#data">data</a> parameter to prepare all table data for initialization in advance.</p> <p>Luckysheet will request the entire workbook data through ajax, and load all <code>celldata</code> in the worksheet data with status 1 by default, and load all the fields except the <code>celldata</code> field in the rest of the worksheets. However, considering that some formulas, charts and pivot tables will reference data from other worksheets, the front end will add a judgment. If the current worksheet references data from other worksheets, it will request data through the interface address configured by <code>loadSheetUrl</code> , And load the data of the related worksheets. Because <code>loadUrl</code> is only responsible for the current worksheet data, it is also necessary to configure <code>loadSheetUrl</code> as an interface for asynchronously loading data.</p></li></ul> <hr> <h3 id="loadsheeturl"><a href="#loadsheeturl" class="header-anchor">#</a> loadSheetUrl</h3> <ul><li>Type: String</li> <li>Default: &quot;&quot;</li> <li>Usage: Configure the address of <code>loadSheetUrl</code>, the parameters are <code>gridKey</code> (workbook primary key) and <code>index</code> (worksheet primary key collection, the format is <code>[&quot;sheet_01&quot;,&quot;sheet_02&quot;,&quot;sheet_03&quot;]</code>), the returned data is the <code>celldata</code> field data collection of the worksheet. In order to load performance considerations, except for the first load of the celldata data of the current worksheet, the data of the other worksheets will be requested only when the worksheet is switched to that worksheet.</li></ul> <hr> <h3 id="allowupdate"><a href="#allowupdate" class="header-anchor">#</a> allowUpdate</h3> <ul><li>Type: Boolean</li> <li>Default: false</li> <li>Usage: Whether to allow back-end update after operating the table, used in conjunction with <code>updateUrl</code></li></ul> <hr> <h3 id="updateurl"><a href="#updateurl" class="header-anchor">#</a> updateUrl</h3> <ul><li>Type: String</li> <li>Default: &quot;&quot;</li> <li>Usage: The back-end update address after operating the workbook will be valid only when <code>allowUpdate</code> is <code>true</code>. This interface is also the interface address for shared editing.</li></ul> <p>Note that you also need to configure <code>loadUrl</code> and <code>loadSheetUrl</code> to take effect.</p> <hr> <h3 id="updateimageurl"><a href="#updateimageurl" class="header-anchor">#</a> updateImageUrl</h3> <ul><li>Type: String</li> <li>Default: &quot;&quot;</li> <li>Usage: Update address of thumbnail</li></ul> <hr> <h3 id="data"><a href="#data" class="header-anchor">#</a> data</h3> <ul><li>Type: Array</li> <li>Default: [{ &quot;name&quot;: &quot;Sheet1&quot;, color: &quot;&quot;, &quot;status&quot;: &quot;1&quot;, &quot;order&quot;: &quot;0&quot;, &quot;data&quot;: [], &quot;config&quot;: {}, &quot;index&quot;:0 }, { &quot;name&quot;: &quot;Sheet2&quot;, color: &quot;&quot;, &quot;status&quot;: &quot;0&quot;, &quot;order&quot;: &quot;1&quot;, &quot;data&quot;: [], &quot;config&quot;: {}, &quot;index&quot;:1  }, { &quot;name&quot;: &quot;Sheet3&quot;, color: &quot;&quot;, &quot;status&quot;: &quot;0&quot;, &quot;order&quot;: &quot;2&quot;, &quot;data&quot;: [], &quot;config&quot;: {}, &quot;index&quot;:2  }]</li> <li>Usage: When <code>loadUrl</code> and <code>loadSheetUrl</code> are not configured, you need to manually configure all the sheet data passed to the entire client <code>[shee1, sheet2, sheet3]</code>. For detailed parameter settings, please refer to <a href="/LuckysheetDocs/zh/guide/sheet.html">worksheet configuration</a></li></ul> <hr> <h3 id="plugins"><a href="#plugins" class="header-anchor">#</a> plugins</h3> <ul><li>Type: Array</li> <li>Default: []</li> <li>Usage: Configure plug-in, support chart: &quot;chart&quot;</li></ul> <hr> <h3 id="column"><a href="#column" class="header-anchor">#</a> column</h3> <ul><li>Type: Number</li> <li>Default: 60</li> <li>Usage: The default number of columns in an empty workbook</li></ul> <hr> <h3 id="row"><a href="#row" class="header-anchor">#</a> row</h3> <ul><li>Type: Number</li> <li>Default: 84</li> <li>Usage: The default number of rows in an empty workbook</li></ul> <hr> <h3 id="autoformatw"><a href="#autoformatw" class="header-anchor">#</a> autoFormatw</h3> <ul><li>Type: Boolean</li> <li>Default: false</li> <li>Usage: Automatically format numbers with more than 4 digits into &quot;billion format&quot;, for example: true or &quot;true&quot; or &quot;TRUE&quot;</li></ul> <hr> <h3 id="accuracy"><a href="#accuracy" class="header-anchor">#</a> accuracy</h3> <ul><li>Type: Number</li> <li>Default: undefined</li> <li>Usage: Set the precision, the number of digits after the decimal point. The parameter is a number or a string of numbers, for example: &quot;0&quot; or 0</li></ul> <hr> <h3 id="allowcopy"><a href="#allowcopy" class="header-anchor">#</a> allowCopy</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: Whether to allow copy</li></ul> <hr> <h3 id="showtoolbar"><a href="#showtoolbar" class="header-anchor">#</a> showtoolbar</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: Whether to show the toolbar</li></ul> <hr> <h3 id="showtoolbarconfig"><a href="#showtoolbarconfig" class="header-anchor">#</a> showtoolbarConfig</h3> <ul><li>Type: Object</li> <li>Default: {}</li> <li>Usage: Custom configuration toolbar,can be used in conjunction with <code>showtoolbar</code>, <code>showtoolbarConfig</code> has a higher priority.</li> <li>Format:<div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
    undoRedo<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Undo redo</span>
    paintFormat<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Format brush</span>
    currencyFormat<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//currency format</span>
    percentageFormat<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Percentage format</span>
    numberDecrease<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Decrease the number of decimal places'</span>
    numberIncrease<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Increase the number of decimal places</span>
    moreFormats<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'More Formats'</span>
    font<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'font'</span>
    fontSize<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Font size'</span>
    bold<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Bold (Ctrl+B)'</span>
    italic<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Italic (Ctrl+I)'</span>
    strikethrough<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Strikethrough (Alt+Shift+5)'</span>
	underline<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 'Underline (Alt+Shift+6)'</span>
	textColor<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Text color'</span>
    fillColor<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Cell color'</span>
    border<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'border'</span>
    mergeCell<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Merge cells'</span>
    horizontalAlignMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Horizontal alignment'</span>
    verticalAlignMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Vertical alignment'</span>
    textWrapMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Wrap mode'</span>
    textRotateMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Text Rotation Mode'</span>
	image<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 'Insert picture'</span>
	link<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 'Insert link'</span>
	chart<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'chart' (the icon is hidden, but if the chart plugin is configured, you can still create a new chart by right click)</span>
	postil<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'comment'</span>
	pivotTable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'PivotTable'</span>
	function<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'formula'</span>
	frozenMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'freeze mode'</span>
	sortAndFilter<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Sort and filter'</span>
	conditionalFormat<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Conditional Format'</span>
	dataVerification<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 'Data Verification'</span>
	splitColumn<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Split column'</span>
	screenshot<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'screenshot'</span>
	findAndReplace<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//'Find and Replace'</span>
	protection<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 'Worksheet protection'</span>
	print<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 'Print'</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li>Example:
<ul><li><p>Show only the <code>undo/redo</code> and <code>font</code> buttons:</p> <div class="language-js extra-class"><pre class="language-js"><code>	<span class="token comment">//options</span>
	<span class="token punctuation">{</span>
		showtoolbar<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		showtoolbarConfig<span class="token operator">:</span><span class="token punctuation">{</span>
			undoRedo<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
			font<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>Hide only the <code>image</code> and <code>print</code> buttons:</p> <div class="language-js extra-class"><pre class="language-js"><code>	<span class="token comment">//options</span>
	<span class="token punctuation">{</span>
		showtoolbar<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// The default is true, you can leave it unset</span>
		showtoolbarConfig<span class="token operator">:</span><span class="token punctuation">{</span>
			image<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
			print<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</code></pre></div></li></ul></li></ul> <hr> <h3 id="showinfobar"><a href="#showinfobar" class="header-anchor">#</a> showinfobar</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: Whether to show the top information bar</li></ul> <hr> <h3 id="showsheetbar"><a href="#showsheetbar" class="header-anchor">#</a> showsheetbar</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: Whether to show the bottom sheet button</li></ul> <hr> <h3 id="showsheetbarconfig"><a href="#showsheetbarconfig" class="header-anchor">#</a> showsheetbarConfig</h3> <ul><li>Type: Object</li> <li>Default: {}</li> <li>Usage: Custom configuration bottom sheet button, can be used in conjunction with <code>showsheetbar</code>, <code>showsheetbarConfig</code> has a higher priority.</li> <li>Format:<div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
    add<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Add worksheet</span>
    menu<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Worksheet management menu</span>
    sheet<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">//Worksheet display</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li>Example:
<ul><li><p>Only display the <code>Add worksheet</code> button:</p> <div class="language-js extra-class"><pre class="language-js"><code>	<span class="token comment">//options</span>
	<span class="token punctuation">{</span>
		showsheetbar<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		showsheetbarConfig<span class="token operator">:</span><span class="token punctuation">{</span>
			add<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>Only hide the <code>Add worksheet</code> and <code>Worksheet management menu</code> buttons:</p> <div class="language-js extra-class"><pre class="language-js"><code>	<span class="token comment">//options</span>
	<span class="token punctuation">{</span>
		showsheetbar<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// The default is true, you can leave it unset</span>
		showsheetbarConfig<span class="token operator">:</span><span class="token punctuation">{</span>
			add<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
			menu<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</code></pre></div></li></ul></li></ul> <hr> <h3 id="showstatisticbar"><a href="#showstatisticbar" class="header-anchor">#</a> showstatisticBar</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: Whether to show the bottom count bar</li></ul> <hr> <h3 id="showstatisticbarconfig"><a href="#showstatisticbarconfig" class="header-anchor">#</a> showstatisticBarConfig</h3> <ul><li>Type: Object</li> <li>Default: {}</li> <li>Usage: Customize the bottom count bar, can be used in conjunction with <code>showstatisticBar</code>, <code>showstatisticBarConfig</code> has a higher priority.</li> <li>Format:<div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
	count<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Count bar</span>
	view<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Print view</span>
    zoom<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// Zoom</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li>Example:
<ul><li><p>Only display the <code>Zoom</code> button:</p> <div class="language-js extra-class"><pre class="language-js"><code>	<span class="token comment">//options</span>
	<span class="token punctuation">{</span>
		showstatisticBar<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		showstatisticBarConfig<span class="token operator">:</span><span class="token punctuation">{</span>
			zoom<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>Only hide the <code>print view</code> button:</p> <div class="language-js extra-class"><pre class="language-js"><code>	<span class="token comment">//options</span>
	<span class="token punctuation">{</span>
		showstatisticBar<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// The default is true, you can leave it unset</span>
		showstatisticBarConfig<span class="token operator">:</span><span class="token punctuation">{</span>
			view<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
</code></pre></div></li></ul></li></ul> <hr> <h3 id="enableaddrow"><a href="#enableaddrow" class="header-anchor">#</a> enableAddRow</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: Allow additional rows</li></ul> <hr> <h3 id="enableaddbacktop"><a href="#enableaddbacktop" class="header-anchor">#</a> enableAddBackTop</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: Allow back to top</li></ul> <hr> <h3 id="userinfo"><a href="#userinfo" class="header-anchor">#</a> userInfo</h3> <ul><li><p>Type: String | Boolean | Object</p></li> <li><p>Default: false</p></li> <li><p>Usage: User information display style in the upper right corner,Support the following three formats</p> <ol><li>HTML template string, such as:</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>options<span class="token operator">:</span><span class="token punctuation">{</span>
	<span class="token comment">// Other configuration</span>
	userInfo<span class="token operator">:</span><span class="token string">'&lt;i style=&quot;font-size:16px;color:#ff6a00;&quot; class=&quot;fa fa-taxi&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; Lucky'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Or an ordinary string, such as:</p> <div class="language-js extra-class"><pre class="language-js"><code>options<span class="token operator">:</span><span class="token punctuation">{</span>
	<span class="token comment">// Other configuration</span>
	userInfo<span class="token operator">:</span><span class="token string">'Lucky'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>Boolean type, such as:</li></ol> <p><code>false</code>: Do not show</p> <div class="language-js extra-class"><pre class="language-js"><code>options<span class="token operator">:</span><span class="token punctuation">{</span>
	<span class="token comment">// Other configuration</span>
	userInfo<span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Do not display user information</span>
<span class="token punctuation">}</span>

</code></pre></div><p><code>ture</code>: Show the default string</p> <div class="language-js extra-class"><pre class="language-js"><code>options<span class="token operator">:</span><span class="token punctuation">{</span>
	<span class="token comment">// Other configuration</span>
	userInfo<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Show HTML:'&lt;i style=&quot;font-size:16px;color:#ff6a00;&quot; class=&quot;fa fa-taxi&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; Lucky'</span>
<span class="token punctuation">}</span>

</code></pre></div><ol start="3"><li>Object format, set <code>userImage</code>: user avatar address and <code>userName</code>: user name, such as:</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>options<span class="token operator">:</span><span class="token punctuation">{</span>
	<span class="token comment">// Other configuration</span>
	userImage<span class="token operator">:</span><span class="token string">'https://cdn.jsdelivr.net/npm/luckyresources@1.0.3/assets/img/logo/logo.png'</span><span class="token punctuation">,</span> <span class="token comment">// Avatar url</span>
	userName<span class="token operator">:</span><span class="token string">'Lucky'</span><span class="token punctuation">,</span> <span class="token comment">// username</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="4"><li>Note that if set to <code>undefined</code> or not set, the same as setting <code>false</code></li></ol></li></ul> <hr> <h3 id="usermenuitem"><a href="#usermenuitem" class="header-anchor">#</a> userMenuItem</h3> <ul><li>Type: Array</li> <li>Default: <code>[{url:&quot;www.baidu.com&quot;, &quot;icon&quot;:'&lt;i class=&quot;fa fa-folder&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;', &quot;name&quot;:&quot;我的表格&quot;}, {url:&quot;www.baidu.com&quot;, &quot;icon&quot;:'&lt;i class=&quot;fa fa-sign-out&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;', &quot;name&quot;:&quot;退出登陆&quot;}]</code></li> <li>Usage: Click the pop-up menu of user information in the upper right corner</li></ul> <hr> <h3 id="myfolderurl"><a href="#myfolderurl" class="header-anchor">#</a> myFolderUrl</h3> <ul><li>Type: String</li> <li>Default: &quot;www.baidu.com&quot;</li> <li>Usage: The link of the <code>&lt;</code> back button in the upper left corner</li></ul> <hr> <h3 id="devicepixelratio"><a href="#devicepixelratio" class="header-anchor">#</a> devicePixelRatio</h3> <ul><li>Type: Number</li> <li>Default: window.devicePixelRatio</li> <li>Usage: Device ratio, the larger the ratio, the higher the resolution of the workbook</li></ul> <hr> <h3 id="functionbutton"><a href="#functionbutton" class="header-anchor">#</a> functionButton</h3> <ul><li>Type: String</li> <li>Default: &quot;&quot;</li> <li>Usage: Function buttons in the upper right corner, for example:<code>'&lt;button id=&quot;&quot; class=&quot;btn btn-primary&quot; style=&quot;padding:3px 6px;font-size: 12px;margin-right: 10px;&quot;&gt;download&lt;/button&gt; &lt;button id=&quot;&quot; class=&quot;btn btn-primary btn-danger&quot; style=&quot; padding:3px 6px; font-size: 12px; margin-right: 10px;&quot;&gt;share&lt;/button&gt; &lt;button id=&quot;luckysheet-share-btn-title&quot; class=&quot;btn btn-primary btn-danger&quot; style=&quot; padding:3px 6px; font-size: 12px; margin-right: 10px;&quot;&gt;show data&lt;/button&gt;'</code></li></ul> <hr> <h3 id="showconfigwindowresize"><a href="#showconfigwindowresize" class="header-anchor">#</a> showConfigWindowResize</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: The configuration of the chart or pivot table will pop up on the right, set whether the workbook will be automatically indented after popping up</li></ul> <hr> <h3 id="forcecalculation"><a href="#forcecalculation" class="header-anchor">#</a> forceCalculation</h3> <ul><li><p>Type: Boolean</p></li> <li><p>Default: false</p></li> <li><p>Usage: Force refresh formula.</p> <p>By default, in order to improve loading performance, when the table is initialized, cells containing formulas will directly obtain <code>v</code> and <code>m</code> as data results by default without real-time calculation.</p> <p>If the data of the cell associated with the formula has changed, or the result of the cell data where the formula is located has changed, it will cause the calculated result of the associated cell to be inconsistent with the actual displayed result. This requires the formula refresh to be turned on to ensure the data The accuracy of real-time calculations.</p> <p>⚠️Reminder, there will be performance problems when there are more formulas, use it with caution!</p></li></ul> <hr> <h3 id="cellrightclickconfig"><a href="#cellrightclickconfig" class="header-anchor">#</a> cellRightClickConfig</h3> <ul><li><p>Type: Object</p></li> <li><p>Default: {}</p></li> <li><p>Usage: Custom configuration cell right-click menu</p></li> <li><p>Format:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
	copy<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// copy</span>
	copyAs<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// copy as</span>
	paste<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// paste</span>
	insertRow<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// insert row</span>
	insertColumn<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// insert column</span>
	deleteRow<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// delete the selected row</span>
	deleteColumn<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// delete the selected column</span>
	deleteCell<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// delete cell</span>
	hideRow<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// hide the selected row and display the selected row</span>
	hideColumn<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// hide the selected column and display the selected column</span>
	rowHeight<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// row height</span>
	columnWidth<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// column width</span>
	clear<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// clear content</span>
	matrix<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// matrix operation selection</span>
	sort<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// sort selection</span>
	filter<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// filter selection</span>
	chart<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// chart generation</span>
	image<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// insert picture</span>
	link<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// insert link</span>
	data<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// data verification</span>
	cellFormat<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// Set cell format</span>
<span class="token punctuation">}</span>
</code></pre></div><p>In addition to the cells, the configuration here also includes the row header right-click menu, the column header right-click menu, and the column header drop-down arrow menu. The specific configuration relationships are as follows:</p> <table><thead><tr><th>Right-click menu configuration</th> <th>Cell</th> <th>Row header</th> <th>Column header</th> <th>Column arrow</th></tr></thead> <tbody><tr><td>copy</td> <td>copy</td> <td>copy</td> <td>copy</td> <td>copy</td></tr> <tr><td>copyAs</td> <td>copy as</td> <td>copy as</td> <td>copy as</td> <td>copy as</td></tr> <tr><td>paste</td> <td>paste</td> <td>paste</td> <td>paste</td> <td>paste</td></tr> <tr><td>insertRow</td> <td>Insert a row</td> <td>Increase N rows upwards and N rows downwards</td> <td>-</td> <td>-</td></tr> <tr><td>insertColumn</td> <td>Insert Column</td> <td>-</td> <td>Add N columns to the left and N columns to the right</td> <td>Add N columns to the left and N columns to the right</td></tr> <tr><td>deleteRow</td> <td>Delete selected row</td> <td>Delete selected row</td> <td>-</td> <td>-</td></tr> <tr><td>deleteColumn</td> <td>Delete selected column</td> <td>-</td> <td>Delete selected column</td> <td>Delete selected column</td></tr> <tr><td>deleteCell</td> <td>Delete cell</td> <td>-</td> <td>-</td> <td>-</td></tr> <tr><td>hideRow</td> <td>-</td> <td>Hide the selected row and show the selected row</td> <td>-</td> <td>-</td></tr> <tr><td>hideColumn</td> <td>-</td> <td>-</td> <td>Hide the selected column and show the selected column</td> <td>Hide the selected column and show the selected column</td></tr> <tr><td>rowHeight</td> <td>-</td> <td>row height</td> <td>-</td> <td>-</td></tr> <tr><td>columnWidth</td> <td>-</td> <td>-</td> <td>Column Width</td> <td>Column Width</td></tr> <tr><td>clear</td> <td>clear content</td> <td>clear content</td> <td>clear content</td> <td>-</td></tr> <tr><td>matrix</td> <td>Matrix Operation Selection</td> <td>Matrix Operation Selection</td> <td>Matrix Operation Selection</td> <td>-</td></tr> <tr><td>sort</td> <td>Sort selection</td> <td>Sort selection</td> <td>Sort selection</td> <td>A-Z sort and Z-A sort</td></tr> <tr><td>filter</td> <td>Filter selection</td> <td>Filter selection</td> <td>Filter selection</td> <td>-</td></tr> <tr><td>chart</td> <td>chart generation</td> <td>chart generation</td> <td>chart generation</td> <td>-</td></tr> <tr><td>image</td> <td>Insert Picture</td> <td>Insert Picture</td> <td>Insert Picture</td> <td>-</td></tr> <tr><td>link</td> <td>Insert link</td> <td>Insert link</td> <td>Insert link</td> <td>-</td></tr> <tr><td>data</td> <td>Data Verification</td> <td>Data Verification</td> <td>Data Verification</td> <td>-</td></tr> <tr><td>cellFormat</td> <td>Set cell format</td> <td>Set cell format</td> <td>Set cell format</td> <td>-</td></tr></tbody></table></li></ul> <hr> <h3 id="sheetrightclickconfig"><a href="#sheetrightclickconfig" class="header-anchor">#</a> sheetRightClickConfig</h3> <ul><li>Type: Object</li> <li>Default: {}</li> <li>Usage: Customize the right-click menu of the bottom sheet bar</li> <li>Format:<div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>   
    delete<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Delete</span>
    copy<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Copy</span>
    rename<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Rename</span>
    color<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Change color</span>
    hide<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Hide, unhide</span>
    move<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//Move to the left, move to the right</span>
<span class="token punctuation">}</span>

</code></pre></div></li></ul> <hr> <h3 id="rowheaderwidth"><a href="#rowheaderwidth" class="header-anchor">#</a> rowHeaderWidth</h3> <ul><li>Type: Number</li> <li>Default: 46</li> <li>Usage: The width of the row header area, if set to 0, it means to hide the row header</li></ul> <hr> <h3 id="columnheaderheight"><a href="#columnheaderheight" class="header-anchor">#</a> columnHeaderHeight</h3> <ul><li>Type: Number</li> <li>Default: 20</li> <li>Usage: The height of the column header area, if set to 0, it means hide the column header</li></ul> <hr> <h3 id="sheetformulabar"><a href="#sheetformulabar" class="header-anchor">#</a> sheetFormulaBar</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage: Whether to show the formula bar</li></ul> <hr> <h3 id="defaultfontsize"><a href="#defaultfontsize" class="header-anchor">#</a> defaultFontSize</h3> <ul><li>Type：Number</li> <li>Default：11</li> <li>Usage：Initialize the default font size</li></ul> <hr> <h3 id="limitsheetnamelength"><a href="#limitsheetnamelength" class="header-anchor">#</a> limitSheetNameLength</h3> <ul><li>Type: Boolean</li> <li>Default: true</li> <li>Usage：Is the length of the sheet name limited in scenarios such as sheet renaming</li></ul> <hr> <h3 id="defaultsheetnamemaxlength"><a href="#defaultsheetnamemaxlength" class="header-anchor">#</a> defaultSheetNameMaxLength</h3> <ul><li>Type：Number</li> <li>Default：31</li> <li>Usage：Default maximum allowed sheet name length</li></ul> <hr> <h3 id="pager"><a href="#pager" class="header-anchor">#</a> pager</h3> <ul><li>Type：Object</li> <li>Default：null</li> <li>Usage：Pager button settings, the first version of the solution is directly used jquery plug-in <a href="https://github.com/jvbei/sPage" target="_blank" rel="noopener noreferrer">sPage<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
Clicking the paging button will trigger the hook function <code>onTogglePager</code>, which returns the current page number, which is the same as the <code>backFun</code> method of <code>sPage</code>. This pager setting is only responsible for the UI part. For the specific data request and data rendering after switching paging, please enter the <code>onTogglePager</code> custom processing in the number of hook lines.<div class="language-js extra-class"><pre class="language-js"><code>pager<span class="token operator">:</span> <span class="token punctuation">{</span>
	pageIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">//Current page number</span>
	pageSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">//How many rows of data are displayed on each page</span>
	total<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token comment">//Total number of rows of data</span>
	selectOption<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span> <span class="token comment">//Options that allow setting the number of rows per page</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <hr> <h2 id="hook-function-todo"><a href="#hook-function-todo" class="header-anchor">#</a> Hook Function (TODO)</h2> <p>When the hook function is used in secondary development, hooks will be implanted in each common mouse or keyboard operation, and the function passed in by the developer will be called to expand the function of Luckysheet.</p> <p>The hook functions are uniformly configured under ʻoptions.hook`, and configuration hooks can be created separately for cells, sheet pages, and tables.</p> <h2 id="cell"><a href="#cell" class="header-anchor">#</a> Cell</h2> <h3 id="celleditbefore"><a href="#celleditbefore" class="header-anchor">#</a> cellEditBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered before entering the cell editing mode. When a cell is selected and in the non-editing state, there are usually the following three conventional methods to trigger the edit mode
<ul><li>Double click the cell</li> <li>Hit Enter</li> <li>Use API: enterEditMode</li></ul></li> <li>Parameter:
<ul><li>{Array} [range]: Current selection range</li></ul></li></ul> <hr> <h3 id="cellupdatebefore"><a href="#cellupdatebefore" class="header-anchor">#</a> cellUpdateBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered before updating this cell value, <code>return false</code> will not perform subsequent updates. After modifying the cell in the editing state, this hook is triggered before exiting the editing mode and updating the data.</li> <li>Parameter:
<ul><li>{Number} [r]: The row number of the cell</li> <li>{Number} [c]: The column number of the cell</li> <li>{Object | String | Number} [value]: The content of the cell to be modified</li> <li>{Boolean} [isRefresh]: Whether to refresh the entire table</li></ul></li></ul> <hr> <h3 id="cellupdated"><a href="#cellupdated" class="header-anchor">#</a> cellUpdated</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered after updating this cell</li> <li>Parameter:
<ul><li>{Number} [r]: The row number of the cell</li> <li>{Number} [c]: The column number of the cell</li> <li>{Object} [oldValue]: Cell object before modification</li> <li>{Object} [newValue]: Modified cell object</li> <li>{Boolean} [isRefresh]: Whether to refresh the entire table</li></ul></li></ul> <hr> <h3 id="cellrenderbefore"><a href="#cellrenderbefore" class="header-anchor">#</a> cellRenderBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered before the cell is rendered, <code>return false</code> will not render the cell</li> <li>Parameter:
<ul><li>{Object} [cell]:Cell object</li> <li>{Object} [position]:
<ul><li>{Number} [r]: The row number of the cell</li> <li>{Number} [c]: The column number of the cell</li> <li>{Number} [start_r]: The horizontal coordinate of the upper left corner of the cell</li> <li>{Number} [start_c]: The vertical coordinate of the upper left corner of the cell</li> <li>{Number} [end_r]: The horizontal coordinate of the lower right corner of the cell</li> <li>{Number} [end_c]: The vertical coordinate of the lower right corner of the cell</li></ul></li> <li>{Object} [sheet]: Current sheet object</li> <li>{Object} [ctx]: The context of the current canvas</li></ul></li></ul> <hr> <h3 id="cellrenderafter"><a href="#cellrenderafter" class="header-anchor">#</a> cellRenderAfter</h3> <ul><li><p>Type: Function</p></li> <li><p>Default: null</p></li> <li><p>Usage: Triggered after the cell rendering ends, <code>return false</code> will not render the cell</p></li> <li><p>Parameter:</p> <ul><li>{Object} [cell]: Cell object</li> <li>{Object} [position]:
<ul><li>{Number} [r]: The row number of the cell</li> <li>{Number} [c]: The column number of the cell</li> <li>{Number} [start_r]: The horizontal coordinate of the upper left corner of the cell</li> <li>{Number} [start_c]: The vertical coordinate of the upper left corner of the cell</li> <li>{Number} [end_r]: The horizontal coordinate of the lower right corner of the cell</li> <li>{Number} [end_c]: The vertical coordinate of the lower right corner of the cell</li></ul></li> <li>{Object} [sheet]: Current worksheet object</li> <li>{Object} [ctx]: The context of the current canvas</li></ul></li> <li><p>Example:</p> <p>A case of drawing two pictures in the upper left corner and lower right corner of cell D1</p> <details class="custom-block details"><summary>DETAILS</summary> <div class="language-js extra-class"><pre class="language-js"><code>luckysheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        hook<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">cellRenderAfter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">cell<span class="token punctuation">,</span> position<span class="token punctuation">,</span> sheetFile<span class="token punctuation">,</span> ctx</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">var</span> r <span class="token operator">=</span> position<span class="token punctuation">.</span>r<span class="token punctuation">;</span>
                <span class="token keyword">var</span> c <span class="token operator">=</span> position<span class="token punctuation">.</span>c<span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>r <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> c <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Specify to process cell D1</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        window<span class="token punctuation">.</span>storeUserImage <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
					
                    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">[</span>r <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> c<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">[</span>r <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> c<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>

                    <span class="token keyword">var</span> img <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
                    <span class="token keyword">var</span> imgRight <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>

                    <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">[</span>r <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> c<span class="token punctuation">]</span><span class="token punctuation">.</span>image <span class="token operator">&amp;&amp;</span> window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">[</span>r <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> c<span class="token punctuation">]</span><span class="token punctuation">.</span>imgRight<span class="token punctuation">)</span> <span class="token punctuation">{</span>
						
						<span class="token comment">// Fetch directly after loading</span>
                        img <span class="token operator">=</span> window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">[</span>r <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> c<span class="token punctuation">]</span><span class="token punctuation">.</span>image<span class="token punctuation">;</span>
                        imgRight <span class="token operator">=</span> window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">[</span>r <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> c<span class="token punctuation">]</span><span class="token punctuation">.</span>imgRight<span class="token punctuation">;</span>

                    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>

                        img <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        imgRight <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

                        img<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'https://www.dogedoge.com/favicon/developer.mozilla.org.ico'</span><span class="token punctuation">;</span>
                        imgRight<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'https://www.dogedoge.com/static/icons/twemoji/svg/1f637.svg'</span><span class="token punctuation">;</span>

						<span class="token comment">// The picture is cached in the memory, fetched directly next time, no need to reload</span>
                        window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">[</span>r <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> c<span class="token punctuation">]</span><span class="token punctuation">.</span>image <span class="token operator">=</span> img<span class="token punctuation">;</span>
                        window<span class="token punctuation">.</span>storeUserImage<span class="token punctuation">[</span>r <span class="token operator">+</span> <span class="token string">'_'</span> <span class="token operator">+</span> c<span class="token punctuation">]</span><span class="token punctuation">.</span>imgRight <span class="token operator">=</span> imgRight<span class="token punctuation">;</span>

                    <span class="token punctuation">}</span>

					
                    <span class="token keyword">if</span> <span class="token punctuation">(</span>img<span class="token punctuation">.</span>complete<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//Direct rendering that has been loaded</span>
                        ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> position<span class="token punctuation">.</span>start_c<span class="token punctuation">,</span> position<span class="token punctuation">.</span>start_r<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                        img<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                            ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> position<span class="token punctuation">.</span>start_c<span class="token punctuation">,</span> position<span class="token punctuation">.</span>start_r<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>

                    <span class="token punctuation">}</span>

                    <span class="token keyword">if</span> <span class="token punctuation">(</span>imgRight<span class="token punctuation">.</span>complete<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>imgRight<span class="token punctuation">,</span> position<span class="token punctuation">.</span>end_c <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">,</span> position<span class="token punctuation">.</span>end_r <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>

                        imgRight<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                            ctx<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>imgRight<span class="token punctuation">,</span> position<span class="token punctuation">.</span>end_c <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">,</span> position<span class="token punctuation">.</span>end_r <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>

                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>:::</p></details></li></ul> <hr> <h3 id="cellallrenderbefore"><a href="#cellallrenderbefore" class="header-anchor">#</a> cellAllRenderBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage:The method executed before all cells are rendered. Internally, this method is added before <code>luckysheetDrawMain</code> renders the table.</li> <li>Parameter:
<ul><li>{Object} [data]: Two-dimensional array data of the current worksheet</li> <li>{Object} [sheet]: Current worksheet object</li> <li>{Object} [ctx]: The context of the current canvas</li></ul></li></ul> <hr> <h3 id="rowtitlecellrenderbefore"><a href="#rowtitlecellrenderbefore" class="header-anchor">#</a> rowTitleCellRenderBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered before the row header cell is rendered, <code>return false</code> will not render the row header</li> <li>Parameter:
<ul><li>{String} [rowNum]: Row number</li> <li>{Object} [position]:
<ul><li>{Number} [r]: The row number of the cell</li> <li>{Number} [top]: The vertical coordinate of the upper left corner of the cell</li> <li>{Number} [width]: Cell width</li> <li>{Number} [height]: Cell height</li></ul></li> <li>{Object} [ctx]: The context of the current canvas</li></ul></li></ul> <hr> <h3 id="rowtitlecellrenderafter"><a href="#rowtitlecellrenderafter" class="header-anchor">#</a> rowTitleCellRenderAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered after the row header cell is rendered, <code>return false</code> will not render the row header</li> <li>Parameter:
<ul><li>{String} [rowNum]: Row number</li> <li>{Object} [position]:
<ul><li>{Number} [r]: The row number of the cell</li> <li>{Number} [top]: The vertical coordinate of the upper left corner of the cell</li> <li>{Number} [width]: Cell width</li> <li>{Number} [height]: Cell height</li></ul></li> <li>{Object} [ctx]: The context of the current canvas</li></ul></li></ul> <hr> <h3 id="columntitlecellrenderbefore"><a href="#columntitlecellrenderbefore" class="header-anchor">#</a> columnTitleCellRenderBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered before the column header cell is rendered, <code>return false</code> will not render the column header</li> <li>Parameter:
<ul><li>{Object} [columnAbc]: Column header characters</li> <li>{Object} [position]:
<ul><li>{Number} [c]: The column number of the cell</li> <li>{Number} [left]: The horizontal coordinate of the upper left corner of the cell</li> <li>{Number} [width]: Cell width</li> <li>{Number} [height]: Cell height</li></ul></li> <li>{Object} [ctx]: The context of the current canvas</li></ul></li></ul> <hr> <h3 id="columntitlecellrenderafter"><a href="#columntitlecellrenderafter" class="header-anchor">#</a> columnTitleCellRenderAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered after the column header cell is rendered, <code>return false</code> will not render the column header</li> <li>Parameter:
<ul><li>{Object} [columnAbc]: Column header characters</li> <li>{Object} [position]:
<ul><li>{Number} [c]: The column number of the cell</li> <li>{Number} [left]: The horizontal coordinate of the upper left corner of the cell</li> <li>{Number} [width]: Cell width</li> <li>{Number} [height]: Cell height</li></ul></li> <li>{Object} [ctx]: The context of the current canvas</li></ul></li></ul> <hr> <h2 id="selected-area"><a href="#selected-area" class="header-anchor">#</a> Selected area</h2> <h3 id="rangeselect"><a href="#rangeselect" class="header-anchor">#</a> rangeSelect</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Frame selection or trigger after setting selection</li> <li>Parameter:
<ul><li>{Object} [sheet]: Current worksheet object</li> <li>{Object | Array} [range]: Selection area, may be multiple selection areas</li></ul></li></ul> <hr> <h3 id="rangemovebefore"><a href="#rangemovebefore" class="header-anchor">#</a> rangeMoveBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before moving the selection, include a single cell</li> <li>Parameter:
<ul><li>{Array} [range]: The current selection area, can only be a single selection area</li></ul></li></ul> <hr> <h3 id="rangemoveafter"><a href="#rangemoveafter" class="header-anchor">#</a> rangeMoveAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After moving the selection, include a single cell</li> <li>Parameter:
<ul><li>{Array} [oldRange]: The current selection range before moving, can only be a single selection</li> <li>{Array} [newRange]: The current selection range after moving, can only be a single selection</li></ul></li></ul> <hr> <h3 id="rangeeditbefore"><a href="#rangeeditbefore" class="header-anchor">#</a> rangeEditBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before the selection</li> <li>Parameter:
<ul><li>{Object | Array} [range]: Selection area, may be multiple selection areas</li> <li>{Object} [data]: Data corresponding to the selection area</li></ul></li></ul> <hr> <h3 id="rangeeditafter"><a href="#rangeeditafter" class="header-anchor">#</a> rangeEditAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After the selection is modified</li> <li>Parameter:
<ul><li>{Object | Array} [range]: Selection area, may be multiple selection areas</li> <li>{Object} [oldData]: Before modification, the data corresponding to the selection area</li> <li>{Object} [newData]: After modification, the data corresponding to the selection area</li></ul></li></ul> <hr> <h3 id="rangecopybefore"><a href="#rangecopybefore" class="header-anchor">#</a> rangeCopyBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before copying selection</li> <li>Parameter:
<ul><li>{Object | Array} [range]: Selection area, may be multiple selection areas</li> <li>{Object} [data]: Data corresponding to the selection area</li></ul></li></ul> <hr> <h3 id="rangecopyafter"><a href="#rangecopyafter" class="header-anchor">#</a> rangeCopyAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After copying selection</li> <li>Parameter:
<ul><li>{Object | Array} [range]: Selection area, may be multiple selection areas</li> <li>{Object} [data]: Data corresponding to the selection area</li></ul></li></ul> <hr> <h3 id="rangepastebefore"><a href="#rangepastebefore" class="header-anchor">#</a> rangePasteBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before pasting the selection</li> <li>Parameter:
<ul><li>{Object | Array} [range]: Selection area, may be multiple selection areas</li> <li>{Object} [data]: The data corresponding to the selection area to be pasted</li></ul></li></ul> <hr> <h3 id="rangepasteafter"><a href="#rangepasteafter" class="header-anchor">#</a> rangePasteAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After pasting the selection</li> <li>Parameter:
<ul><li>{Object | Array} [range]: Selection area, may be multiple selection areas</li> <li>{Object} [originData]: The data corresponding to the selection area to be pasted</li> <li>{Object} [pasteData]: Data to paste</li></ul></li></ul> <hr> <h3 id="rangecutbefore"><a href="#rangecutbefore" class="header-anchor">#</a> rangeCutBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before selection cut</li> <li>Parameter:
<ul><li>{Array} [range]: Selection range, can only be a single range</li> <li>{Object} [data]: The data corresponding to the selection area to be cut</li></ul></li></ul> <hr> <h3 id="rangecutafter"><a href="#rangecutafter" class="header-anchor">#</a> rangeCutAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After selection cut</li> <li>Parameter:
<ul><li>{Array} [range]: Selection range, can only be a single range</li> <li>{Object} [data]: The data corresponding to the selection area to be cut</li></ul></li></ul> <hr> <h3 id="rangedeletebefore"><a href="#rangedeletebefore" class="header-anchor">#</a> rangeDeleteBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before the selection is deleted</li> <li>Parameter:
<ul><li>{Array} [range]: Selection range, can only be a single range</li> <li>{Object} [data]: The data corresponding to the selection area to be deleted</li></ul></li></ul> <hr> <h3 id="rangedeleteafter"><a href="#rangedeleteafter" class="header-anchor">#</a> rangeDeleteAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After the selection is deleted</li> <li>Parameter:
<ul><li>{Array} [range]: Selection range, can only be a single range</li> <li>{Object} [data]: The data corresponding to the selection area to be deleted</li></ul></li></ul> <hr> <h3 id="rangeclearbefore"><a href="#rangeclearbefore" class="header-anchor">#</a> rangeClearBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before the selection is cleared</li> <li>Parameter:
<ul><li>{Object | Array} [range]: Selection area, may be multiple selection areas</li> <li>{Object} [data]: The data corresponding to the selection area to be cleared</li></ul></li></ul> <hr> <h3 id="rangeclearafter"><a href="#rangeclearafter" class="header-anchor">#</a> rangeClearAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After the selection is cleared</li> <li>Parameter:
<ul><li>{Object | Array} [range]: Selection area, may be multiple selection areas</li> <li>{Object} [data]: The data corresponding to the selection area to be cleared</li></ul></li></ul> <hr> <h3 id="rangepullbefore"><a href="#rangepullbefore" class="header-anchor">#</a> rangePullBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before selection drop down</li> <li>Parameter:
<ul><li>{Array} [range]: The current selection range, can only be a single range</li></ul></li></ul> <hr> <h3 id="rangepullafter"><a href="#rangepullafter" class="header-anchor">#</a> rangePullAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After selection drop down</li> <li>Parameter:
<ul><li>{Array} [range]: The selection range after the drop-down can only be a single range</li></ul></li></ul> <hr> <h2 id="worksheet"><a href="#worksheet" class="header-anchor">#</a> Worksheet</h2> <h3 id="sheetcreatekbefore"><a href="#sheetcreatekbefore" class="header-anchor">#</a> sheetCreatekBefore</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered before the worksheet is created, the new worksheet also includes the new pivot table</li></ul> <hr> <h3 id="sheetcreateafter"><a href="#sheetcreateafter" class="header-anchor">#</a> sheetCreateAfter</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered after the worksheet is created, the new worksheet also includes the new pivot table</li> <li>Parameter:
<ul><li>{Object} [sheet]: The configuration of the newly created worksheet</li></ul></li></ul> <hr> <h3 id="sheetmovebefore"><a href="#sheetmovebefore" class="header-anchor">#</a> sheetMoveBefore</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before the worksheet is moved</li> <li>Parameter:
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li> <li>{Number} [order]: <code>Order</code> of current worksheet</li></ul></li></ul> <hr> <h3 id="sheetmoveafter"><a href="#sheetmoveafter" class="header-anchor">#</a> sheetMoveAfter</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After the worksheet is moved</li> <li>Parameter:
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li> <li>{Number} [oldOrder]: Before modification, the <code>order</code> of the current worksheet</li> <li>{Number} [newOrder]: After modification, the <code>order</code> of the current worksheet</li></ul></li></ul> <hr> <h3 id="sheetdeletebefore"><a href="#sheetdeletebefore" class="header-anchor">#</a> sheetDeleteBefore</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before the worksheet is deleted</li> <li>Parameter:
<ul><li>{Object} [sheet]: Configuration of the worksheet to be deleted</li></ul></li></ul> <hr> <h3 id="sheetdeleteafter"><a href="#sheetdeleteafter" class="header-anchor">#</a> sheetDeleteAfter</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After the worksheet is deleted</li> <li>Parameter:
<ul><li>{Object} [sheet]: Configuration of deleted worksheet</li></ul></li></ul> <hr> <h3 id="sheeteditnamebefore"><a href="#sheeteditnamebefore" class="header-anchor">#</a> sheetEditNameBefore</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before changing the name of the worksheet</li> <li>Parameter:
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li> <li>{String} [name]: Current worksheet name</li></ul></li></ul> <hr> <h3 id="sheeteditnameafter"><a href="#sheeteditnameafter" class="header-anchor">#</a> sheetEditNameAfter</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After changing the name of the worksheet</li> <li>Parameter:
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li> <li>{String} [oldName]: Before modification, the current worksheet name</li> <li>{String} [newName]: After modification, the current worksheet name</li></ul></li></ul> <hr> <h3 id="sheeteditcolorbefore"><a href="#sheeteditcolorbefore" class="header-anchor">#</a> sheetEditColorBefore</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before changing the color of the worksheet</li> <li>Parameter:
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li> <li>{String} [color]: Current worksheet color</li></ul></li></ul> <hr> <h3 id="sheeteditcolorafter"><a href="#sheeteditcolorafter" class="header-anchor">#</a> sheetEditColorAfter</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After changing the color of the worksheet</li> <li>Parameter:
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li> <li>{String} [oldColor]: Before modification, the current worksheet color</li> <li>{String} [newColor]: After modification, the current worksheet color</li></ul></li></ul> <hr> <h3 id="sheetzoombefore"><a href="#sheetzoombefore" class="header-anchor">#</a> sheetZoomBefore</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before worksheet zoom</li> <li>Parameter:
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li> <li>{String} [zoom]: Current worksheet zoom ratio</li></ul></li></ul> <hr> <h3 id="sheetzoomafter"><a href="#sheetzoomafter" class="header-anchor">#</a> sheetZoomAfter</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After worksheet zoom</li> <li>Parameter:
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li> <li>{String} [oldZoom]: Before modification, the current worksheet zoom ratio</li> <li>{String} [newZoom]: After modification, the current worksheet zoom ratio</li></ul></li></ul> <hr> <h3 id="sheetactivatebefore"><a href="#sheetactivatebefore" class="header-anchor">#</a> sheetActivateBefore</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage：Before worksheet activate</li> <li>Parameter：
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li></ul></li></ul> <hr> <h3 id="sheetactivateafter"><a href="#sheetactivateafter" class="header-anchor">#</a> sheetActivateAfter</h3> <p>(TODO)</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage：After worksheet activate</li> <li>Parameter：
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li></ul></li></ul> <hr> <h3 id="sheetdeactivatebefore"><a href="#sheetdeactivatebefore" class="header-anchor">#</a> sheetDeactivateBefore</h3> <p>（TODO）</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage：Before the worksheet changes from active to inactive</li> <li>Parameter：
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li></ul></li></ul> <hr> <h3 id="sheetdeactivateafter"><a href="#sheetdeactivateafter" class="header-anchor">#</a> sheetDeactivateAfter</h3> <p>（TODO）</p> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage：After the worksheet is changed from active to inactive</li> <li>Parameter：
<ul><li>{Number} [i]: <code>index</code> of current worksheet</li></ul></li></ul> <hr> <h2 id="workbook"><a href="#workbook" class="header-anchor">#</a> Workbook</h2> <h3 id="workbookcreatebefore"><a href="#workbookcreatebefore" class="header-anchor">#</a> workbookCreateBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered before the worksheet is created. The old hook function is called <code>beforeCreateDom</code></li> <li>Parameter:
<ul><li>{Object} [book]:Configuration of the entire workbook (options)</li></ul></li></ul> <hr> <h3 id="workbookcreateafter"><a href="#workbookcreateafter" class="header-anchor">#</a> workbookCreateAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered after the workbook is created</li> <li>Parameter:
<ul><li>{Object} [book]:Configuration of the entire workbook (options)</li></ul></li></ul> <hr> <h3 id="workbookdestroybefore"><a href="#workbookdestroybefore" class="header-anchor">#</a> workbookDestroyBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered before the workbook is destroyed</li> <li>Parameter:
<ul><li>{Object} [book]:Configuration of the entire workbook (options)</li></ul></li></ul> <hr> <h3 id="workbookdestroyafter"><a href="#workbookdestroyafter" class="header-anchor">#</a> workbookDestroyAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Triggered after the workbook is destroyed</li> <li>Parameter:
<ul><li>{Object} [book]:Configuration of the entire workbook (options)</li></ul></li></ul> <hr> <h3 id="updated"><a href="#updated" class="header-anchor">#</a> updated</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: The method executed after each operation is updated is executed after the canvas rendering, monitor changes in worksheet content, that is, every time the client performs a workbook operation, Luckysheet saves the operation in the history and triggers it. When undoing and redoing, it is also an operation, of course, the hook function will be triggered.</li> <li>Parameter:
<ul><li>{Object} [operate]: The history information of this operation will have different history records according to different operations. Refer to the source code <a href="https://github.com/mengshukeji/Luckysheet/blob/master/src/controllers/controlHistory.js" target="_blank" rel="noopener noreferrer">History<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <hr> <h3 id="resized"><a href="#resized" class="header-anchor">#</a> resized</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After resize is executed</li> <li>Parameter:
<ul><li>{Object} [size]: The width and height of the entire workbook area</li></ul></li></ul> <hr> <h2 id="image"><a href="#image" class="header-anchor">#</a> Image</h2> <h3 id="imageinsertbefore"><a href="#imageinsertbefore" class="header-anchor">#</a> imageInsertBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before the picture is inserted</li> <li>Parameter:
<ul><li>{Object} [url]: Picture address</li></ul></li></ul> <hr> <h3 id="imageinsertafter"><a href="#imageinsertafter" class="header-anchor">#</a> imageInsertAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After the picture is inserted</li> <li>Parameter:
<ul><li>{Object} [item]]: Picture address, width and height, location and other information</li></ul></li></ul> <hr> <h3 id="imageupdatebefore"><a href="#imageupdatebefore" class="header-anchor">#</a> imageUpdateBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before the picture is modified, the modified content includes operations such as width and height, position, and cropping</li> <li>Parameter:
<ul><li>{Object} [item]]: Picture address, width and height, location and other information</li></ul></li></ul> <hr> <h3 id="imageupdateafter"><a href="#imageupdateafter" class="header-anchor">#</a> imageUpdateAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After the picture is modified, the modified content includes operations such as width and height, position, and cropping</li> <li>Parameter:
<ul><li>{Object} [oldItem]]: Before modification, the picture address, width and height, location and other information</li> <li>{Object} [newItem]]: After modification, the picture address, width and height, location and other information</li></ul></li></ul> <hr> <h3 id="imagedeletebefore"><a href="#imagedeletebefore" class="header-anchor">#</a> imageDeleteBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before the picture is deleted</li> <li>Parameter:
<ul><li>{Object} [item]]: Picture address, width and height, location and other information</li></ul></li></ul> <hr> <h3 id="imagedeleteafter"><a href="#imagedeleteafter" class="header-anchor">#</a> imageDeleteAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After the picture is deleted</li> <li>Parameter:
<ul><li>{Object} [item]]: Picture address, width and height, location and other information</li></ul></li></ul> <hr> <h2 id="comment"><a href="#comment" class="header-anchor">#</a> Comment</h2> <h3 id="commentinsertbefore"><a href="#commentinsertbefore" class="header-anchor">#</a> commentInsertBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before inserting comments</li> <li>Parameter:
<ul><li>{Object} [cell]: The cell information of the comment to be inserted, such as:<code>{ r:0,c:2,v:{m:'233',v:'233'}}</code></li></ul></li></ul> <hr> <h3 id="commentinsertafter"><a href="#commentinsertafter" class="header-anchor">#</a> commentInsertAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After inserting comments</li> <li>Parameter:
<ul><li>{Object} [cell]: The cell information where the comment is inserted, such as:<code>{ r:0,c:2,v:{m:'233',v:'233'}}</code>, contains comment information</li></ul></li></ul> <hr> <h3 id="commentdeletebefore"><a href="#commentdeletebefore" class="header-anchor">#</a> commentDeleteBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before deleting comments</li> <li>Parameter:
<ul><li>{Object} [cell]: The cell information of the comment to be deleted, such as:<code>{ r:0,c:2,v:{m:'233',v:'233'}}</code></li></ul></li></ul> <hr> <h3 id="commentdeleteafter"><a href="#commentdeleteafter" class="header-anchor">#</a> commentDeleteAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After deleting the comment</li> <li>Parameter:
<ul><li>{Object} [cell]: The cell information of the deleted comment, such as:<code>{ r:0,c:2,v:{m:'233',v:'233'}}</code></li></ul></li></ul> <hr> <h3 id="commentupdatebefore"><a href="#commentupdatebefore" class="header-anchor">#</a> commentUpdateBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before modifying comments</li> <li>Parameter:
<ul><li>{Object} [cell]: The cell information of the comment, such as:<code>{ r:0,c:2,v:{m:'233',v:'233'}}</code></li></ul></li></ul> <hr> <h3 id="commentupdateafter"><a href="#commentupdateafter" class="header-anchor">#</a> commentUpdateAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After modifying the comment</li> <li>Parameter:
<ul><li>{Object} [oldCell]: Before modification, the cell information where the comment is located, such as:<code>{ r:0,c:2,v:{m:'233',v:'233'}}</code></li> <li>{Object} [newCell]: After modification, the cell information where the comment is located, such as:<code>{ r:0,c:2,v:{m:'233',v:'233'}}</code></li></ul></li></ul> <hr> <h2 id="pivot-table"><a href="#pivot-table" class="header-anchor">#</a> Pivot table</h2> <h3 id="pivottableeditbefore"><a href="#pivottableeditbefore" class="header-anchor">#</a> pivotTableEditBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before modifying the PivotTable, operations such as dragging fields, etc.</li> <li>Parameter:
<ul><li>{Object} [sheet]: Worksheet configuration where the pivot table is located</li></ul></li></ul> <hr> <h3 id="pivottableeditafter"><a href="#pivottableeditafter" class="header-anchor">#</a> pivotTableEditAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After modifying the PivotTable, operations such as dragging fields, etc.</li> <li>Parameter:
<ul><li>{Object} [oldSheet]: Before modification, the worksheet configuration where the pivot table is located</li> <li>{Object} [newSheet]: After modification, the worksheet configuration where the pivot table is located</li></ul></li></ul> <hr> <h2 id="freeze"><a href="#freeze" class="header-anchor">#</a> Freeze</h2> <h3 id="frozencreatebefore"><a href="#frozencreatebefore" class="header-anchor">#</a> frozenCreateBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before setting freeze</li> <li>Parameter:
<ul><li>{Object} [frozen]: Freeze type information</li></ul></li></ul> <hr> <h3 id="frozencreateafter"><a href="#frozencreateafter" class="header-anchor">#</a> frozenCreateAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After setting freeze</li> <li>Parameter:
<ul><li>{Object} [frozen]: Freeze type information</li></ul></li></ul> <hr> <h3 id="frozencancelbefore"><a href="#frozencancelbefore" class="header-anchor">#</a> frozenCancelBefore</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Before unfreezing</li> <li>Parameter:
<ul><li>{Object} [frozen]: Freeze type information</li></ul></li></ul> <hr> <h3 id="frozencancelafter"><a href="#frozencancelafter" class="header-anchor">#</a> frozenCancelAfter</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: After unfreezing</li> <li>Parameter:
<ul><li>{Object} [frozen]: Freeze type information</li></ul></li></ul> <hr> <h4 id="legacy-hook-function"><a href="#legacy-hook-function" class="header-anchor">#</a> Legacy Hook Function</h4> <h3 id="firemousedown"><a href="#firemousedown" class="header-anchor">#</a> fireMousedown</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Customized method of drilling down cell data, note that this hook function is mounted under options: <code>options.fireMousedown</code></li></ul> <hr> <h2 id="pager-2"><a href="#pager-2" class="header-anchor">#</a> Pager</h2> <h3 id="ontogglepager"><a href="#ontogglepager" class="header-anchor">#</a> onTogglePager</h3> <ul><li>Type: Function</li> <li>Default: null</li> <li>Usage: Click the page button to call back the function, return the current page number, refer to <a href="https://github.com/jvbei/sPage" target="_blank" rel="noopener noreferrer">sPage backFun<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Parameter:
<ul><li>{Object} [page]: Return the current page object</li></ul></li></ul> <hr></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/mengshukeji/Luckysheet/edit/master/docs/guide/config.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/19/2021, 1:33:53 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/LuckysheetDocs/guide/" class="prev router-link-active">
        Get started
      </a></span> <span class="next"><a href="/LuckysheetDocs/guide/sheet.html">
        Sheet Configuration
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/LuckysheetDocs/assets/js/app.02d9598d.js" defer></script><script src="/LuckysheetDocs/assets/js/2.daa13025.js" defer></script><script src="/LuckysheetDocs/assets/js/15.51a43d85.js" defer></script>
  </body>
</html>
